<template>
	<view class="content">
		<view class="registerContainer">
			<text class="title">注册</text>
			<input class="input" type="text" placeholder="请输入用户名" v-model="registerForm.username" />
			<input class="input" type="password" placeholder="请输入密码" v-model="registerForm.password" />
			<input class="input" type="password" placeholder="请确认密码" v-model="registerForm.rePassword" />
			<button class="register-btn" type="primary" @click="handleRegister">登录</button>
			<view class="link">
				<text class="tips">已有账号？</text>
				<navigator class="nav" url="/pages/login/login">去登录</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				registerForm: {
					username: '',
					password: '',
					rePassword: ''
				}
			}
		},
		methods: {
			handleRegister() {
				if (!this.registerForm.username || !this.registerForm.password) {
					uni.showToast({
						title: '请输入完整信息',
						icon: 'none'
					})
					return
				}
				if (this.registerForm.password.length < 6) {
					return uni.showToast({
						title: '密码不能少于6位',
						icon: 'none'
					});
				}

				if (this.registerForm.password !== this.registerForm.rePassword) {
					return uni.showToast({
						title: '两次密码不一致',
						icon: 'none'
					});
					return
				}
				uni.showLoading({
					title: '注册中...'
				})
				console.log("点击注册，准备调用接口发送数据")
				// 把数据提交到服务器
				uniCloud.callFunction({
					// 调用的接口名字
					name: 'addUser',
					// 上传的数据
					data: {
						'username': this.registerForm.username,
						'password': this.registerForm.password
					},
					success: (msg) => {
						console.log('addUser success----->', JSON.stringify(msg))
						setTimeout(() => {
							uni.hideLoading()
							uni.showToast({
								title: "注册成功"
							})
							uni.redirectTo({
								url: '/pages/login/login'
							})
						}, 1000)
						uni.navigateBack();
					},
					fail: (res) => {
						console.warn("addUser fail------->", res);
					}
				})
			}
		}
	}
</script>

<style>
	.content {
		background-color: whitesmoke;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.registerContainer {
		height: 500rpx;
		width: 600rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: white;
	}


	.input {
		width: 315rpx;
		font-size: 25rpx;
		border: 1rpx solid #CCCCCC;
		border-radius: 8rpx;
		padding: 5rpx 15rpx;
		margin: 10rpx 5rpx;
	}

	.link {
		display: flex;
		font-size: 15rpx;
	}

	.tips:active {
		color: #007aff;

	}

	.register-btn {
		width: 350rpx;
		font-size: 15rpx;
		margin: 5px;
	}

	.nav {
		color: #007aff;
	}
</style>